<template>
  <view class="wanl-live-message">
    <view class="wanl-live-comment">
      <view class="wanl-live-comment-item">
        <scroll-view
          scroll-y="true"
          :show-scrollbar="false"
          :scroll-into-view="scrollToView"
          :scroll-with-animation="true"
          class="wanl-live-comment-item-scroll"
        >
          <!-- #ifdef APP -->
          <view class="wanl-live-comment-item-scroll-app" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
            <view class="wanl-live-comment-item-scroll-app-item">
              <text :class="[iscolor(item.form.id)]" class="app-text" v-if="item.form.name">{{ item.form.name }}：</text>
              <text class="app-context">{{ item.message }}</text>
            </view>
          </view>
          <!-- #endif -->

          <!-- #ifdef H5 -->
          <div class="wanl-live-comment-item-scroll-h5" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
            <div class="wanl-live-comment-item-tag">
              <text :class="[iscolor(item.form.id)]" class="mph5-text" v-if="item.form.name">{{ item.form.name }}：</text>
              <text class="mph5-context">{{ item.message }}</text>
            </div>
          </div>
          <!-- #endif -->

          <!-- #ifdef MP -->
          <div class="wanl-live-comment-item-scroll-mp" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
            <div class="wanl-live-comment-item-tag">
              <text :class="[iscolor(item.form.id)]" class="mph5-text" v-if="item.form.name">{{ item.form.name }}：</text>
              <text class="mph5-context">{{ item.message }}</text>
            </div>
          </div>
          <!-- #endif -->
        </scroll-view>
        <view class="mask" v-if="isfocur" @tap="blur()"> </view>
        <view class="comment-box">
          <view class="comment-input-box" style="flex: 1">
            <input
              ref="commentInput"
              class="comment-input"
              v-model="msgText"
              placeholder="聊一聊"
              placeholder-class="placeholderClass"
              :adjust-position="true"
              confirm-type="send"
              @focus="handleFocus"
              @blur="handleBlur"
              @confirm="onSend"
            />

            <text class="send-btn" @click="onSend()">发送</text>
          </view>

          <view class="comment-icon-box">
            <!-- 	<view class="shang-btn" @tap="openPop()">
							<image src="/static/images/shang2.png" class="shang-image"></image>
						</view> -->

            <!-- <view class="gift-btn" @tap="openGiftPop()">
							<image src="/static/images/gift.png" class="gift-image"></image>
						</view> -->

            <!-- 	<view class="shang-btn" @tap="openRedpacket()">
							<image src="/static/images/shang2.png" class="shang-image"></image>
						</view> -->
          </view>
        </view>
      </view>
    </view>

    <uni-transition :mode-class="['slide-left']" :styles="{ position: 'absolute', left: '0', top: '-60rpx' }" :show="comingShow">
      <view class="wanl-live-coming">
        <text class="wanl-live-coming-text">{{ comingName }} 他来了他来了~</text>
      </view>
    </uni-transition>

    <!-- 打赏主播 -->
    <view class="live-popup" v-if="isShowPopup">
      <uni-popup ref="money" type="bottom">
        <view class="live-popup">
          <view class="live-popup-title">
            <text class="live-popup-title-text">打赏主播</text>
            <image src="/static/images/close.png" class="live-popup-title-close-text" @tap="isShowPopup = false"></image>
          </view>

          <scroll-view :show-scrollbar="false" scroll-y="true" class="live-popup-list">
            <view class="start-list">
              <text class="category-title">打赏金额</text>
            </view>

            <input placeholder="请输入打赏金额" type="number" v-model="money" placeholder-class="input-placeholder" />
          </scroll-view>

          <view class="live-popup-start live-control-right-start" :style="{ bottom: statusFootHeight + 9 + 'px' }" @tap="daShangMake()">
            <text class="live-control-right-start-text">确认打赏</text>
          </view>

          <!-- 多终端兼容性 -->
          <view :style="{ height: statusFootHeight + 'px' }"></view>
        </view>
      </uni-popup>
    </view>

    <!-- 刷礼物 -->
    <!-- <view class="live-popup live-popup-gift">
      <uni-popup ref="gift" type="bottom">
        <view class="live-popup live-popup-gift">
          <view class="live-popup-title">
            <text class="live-popup-title-text text-white">礼物</text>
            <image src="/static/images/close.png" class="live-popup-title-close-text" @tap="$refs.gift.close()"></image>
          </view>

          <scroll-view :show-scrollbar="false" scroll-y="true" class="live-popup-list2" :style="{ height: '400rpx' }">
            <view class="gift-box">
              <view
                :class="index === gift_index ? 'gift-item-active' : 'gift-item'"
                v-for="(item, index) in giftList"
                :key="index"
                @click="changeGift(index)"
              >
                <image :src="item.image" class="gift-pic"></image>
                <text class="gift-title">{{ item.name }}</text>
                <text class="gift-price">{{ item.price }}</text>

                <view class="gift-item-bottom">
                  <text class="gift-small-btn" @click.stop="sendGift(item)" v-if="index === gift_index">赠送</text>
                </view>
              </view>
            </view>
          </scroll-view>

          <view :style="{ height: statusFootHeight + 'px' }"></view>
        </view>
      </uni-popup>
    </view> -->
  </view>
</template>

<script>
  // import uniTransition from '@/components/uni-transition/uni-transition';
  import userstore from '@/sheep/store/user.js';
  import chatstore from '@/sheep/store/chat.js';
  import { mapState, mapActions } from 'pinia';

  import sheep from '@/sheep';
  import socket from '@/sheep/store/socket';

  // import {BASE_URL} from '@/env.js'
  // import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
  export default {
    name: 'LiveMessage',
    data() {
      return {
        msgText: '',
        scrollToView: 'msg1',
        comingShow: false,
        comingName: '',
        watchTimer: null,
        msgList: [],
        likeList: [],
        isShowPopup: false,
        money: '',
        isfocur: false,
        isShowGiftPopup: false,
        gift_index: 0,
        giftList: [
          // {
          // 	image: '/static/images/default/screen_icon_new.png',
          // 	title: '小心心',
          // 	price:10,
          // },
        ],
      };
    },
    props: {
      liveData: {
        type: Object,
        default: null,
      },
      statusFootHeight: {
        default: 0,
      },
    },
    created() {
      //让用户加入直播间
      // this.sendWs('', 'jr');
    },
    mounted() {
      uni.$on('live_message', this.parseMsgStatus);
      uni.$on('live_message_' + this.liveData.id, this.parseMsgStatus);
    },
    beforeUnmount() {
      uni.$off('live_message', this.parseMsgStatus);
      uni.$off('live_message_' + this.liveData.id, this.parseMsgStatus);
    },
    computed: {
      ...mapState(userstore, ['userInfo']),
      ...mapState(chatstore, ['messages', 'isConnected']),
      isClose() {
        return !this.isConnected;
      },
    },
    methods: {
      ...mapActions(socket, ['sendmsg']),

      blur() {
        // #ifdef APP
        this.$refs.commentInput.blur();
        // #endif
      },
      // 解析链接状态
      parseMsgStatus(obj) {
        //let obj = JSON.parse(msgStr);
        console.log('观众端 parseMsgStatus 收到消息', obj, '连接状态:', socket().socketIo.is_open_socket);
        switch (obj.type) {
          case 'data':
            console.log('观众端 收到data类型消息，更新在线人数');
            this.$emit('changeOnlineNum', obj.data.message);
            break;

          case 'message':
            //如果是自己发送的消息，则不展示
            if (obj.form.id == this.userInfo.id) {
              console.log('观众端 收到自己发送的消息，不展示', obj.form.id, this.userInfo.id);
              return false;
            }
            let obj1 = this.parseMsg(obj.message, obj.form, obj.createtime);
            console.log('观众端 解析后的消息对象', obj1);
            if (obj1) {
              this.msgList.push(obj1);
              console.log('观众端 消息列表更新，当前长度:', this.msgList.length);
            }

            this.$nextTick(() => {
              this.scrollToView = `msg${this.msgList.length - 1}`;
              console.log('观众端 滚动到最新消息:', this.scrollToView);
            });

            break;

          default:
            console.log('观众端 收到未知类型消息:', obj.type);
        }
      },

      // 解析消息类型,接受数据时才用，发送数据时不用。
      parseMsg(message, fromuser, createtime) {
        console.log('观众端 parseMsg 接收到的消息对象:', message, '发送者:', fromuser, '创建时间:', createtime);
        let obj = null;
        switch (message.type) {
          case 'text':
            console.log('观众端 解析文本消息:', message.content);
            obj = {
              createtime: createtime,
              is_my: false,
              message: message.content,
              message_type: message.type,
              form: fromuser,
            };
            break;
          case 'system_live':
            console.log('观众端 解析系统直播消息:', message.content);
            this.$emit(message.content.type, message.content);
            return false;
            break;
          case 'redpacket':
            console.log('观众端 解析红包消息:', message.content);
            obj = {
              createtime: createtime,
              is_my: false,
              message: message.content,
              message_type: message.type,
              form: fromuser,
            };
            console.log('观众端 添加红包系统消息');
            this.msgList.push({
              is_my: false,
              type: 'message',
              message_type: 'text',
              message: '主播发了红包',
              form: {
                id: 0,
                avatar: '',
                name: '',
              },
              createtime: this.dateFormat('yyyy-MM-dd hh:mm:ss'),
            });

            this.msgText = '';
            this.$nextTick(() => {
              this.scrollToView = `msg${this.msgList.length - 1}`;
              console.log('观众端 红包消息滚动到最新:', this.scrollToView);
            });
            this.$emit('refisdlive');
            console.log('观众端 触发refisdlive事件');
            return false;
            break;
          case 'gift':
            console.log('观众端 解析礼物消息:', message.content);
            obj = {
              createtime: createtime,
              is_my: false,
              message: '赠送了【' + message.content.name + '】',
              message_type: message.type,
              form: fromuser,
            };
            console.log('观众端 触发礼物震动和显示');
            uni.vibrateLong();
            this.$emit('showGift', message.content.svg);
            break;

          default:
            console.log('观众端 解析未知类型消息:', message.type, message.content);
            return false;
        }
        console.log('观众端 解析后的消息对象:', obj);
        return obj;
      },

      //用户退出
      quit() {
        //发送退出消息
        console.log('play go quit');
        this.sendWs('', 'tc');
      },
      onSend() {
        if (this.msgText) {
          this.blur();
          this.sendWs(this.msgText);
          this.pushChat(this.msgText);
          this.msgText = '';
        }
      },
      // 发送服务数据
      async sendWs(data, type = 'text') {
        console.log('观众端 准备发送消息，类型:', type, '内容:', data, '直播间ID:', this.liveData.id);
        let msg = {
          type: 'message_live',
          data: {
            to: this.liveData.id,
          },
          message: {
            type: type, // 修复：将message_type改为type，与parseMsg中的判断一致
            content: data, // 修复：将message改为content，与parseMsg中的读取一致
          },
          form: {
            id: this.userInfo.id,
            avatar: this.userInfo.avatar,
            name: this.userInfo.nickname,
          },
        };
        let strMsg = JSON.stringify(msg);
        try {
          console.log('观众端 发送消息前的对象', msg, '连接状态:', socket().socketIo.is_open_socket);
          let res = await sheep.$api.video.livemsg({
            id: this.liveData.id,
            message_type: type,
            message: data,
          });
          console.log('观众端 发送消息内容', strMsg);
          console.log('观众端 API返回结果', res);
          if (res.error === 0) {
            console.log('观众端 API调用成功，发送WebSocket消息');
            this.sendmsg(strMsg, 'text');
            return true;
          } else {
            console.error('观众端 API调用失败，错误码:', res.error, '错误信息:', res.msg);
            uni.showToast({
              title: res.msg || '发送失败，请重试',
              icon: 'none',
            });
            return false;
          }
        } catch (error) {
          console.error('观众端 发送消息失败', error);
          uni.showToast({
            title: '发送失败，请重试',
            icon: 'none',
          });
          return false;
        }
      },
      // 发送本地数据。
      pushChat(data, type = 'text') {
        console.log('go pushChat', data, type);
        if (this.isClose) {
          uni.showToast({
            title: '您已掉线！请返回重试',
            icon: 'none',
          });
          return;
        }

        this.msgList.push({
          is_my: true,
          type: 'message_live',
          message_type: type,
          message: data,
          form: {
            name: this.userInfo.nickname,
            avatar: this.userInfo.avatar,
            id: this.userInfo.id,
          },
          createtime: this.dateFormat('yyyy-MM-dd hh:mm:ss'),
        });

        this.msgText = '';
        this.$nextTick(() => {
          this.scrollToView = `msg${this.msgList.length - 1}`;
        });
      },

      onMessage(msg) {
        console.log('观众端收到消息', msg);
        var message = msg.message;
        var form = msg.form;
        if (
          message.type == 'msg' ||
          message.type == 'seek' ||
          message.type == 'follow' ||
          message.type == 'like' ||
          message.type == 'review' ||
          message.type == 'text'
        ) {
          if (message.type == 'like') {
            this.likeStart();
          }

          // 处理文本消息
          if (message.type == 'text') {
            this.msgList.push({
              is_my: form.id === this.userInfo.id,
              type: 'message_live',
              message_type: 'text',
              message: message.message,
              form: form,
              createtime: this.dateFormat('yyyy-MM-dd hh:mm:ss'),
            });
          } else {
            this.msgList.push({
              form: form,
              text: message.text,
            });
          }

          this.$nextTick(() => {
            this.scrollToView = `msg${this.msgList.length - 1}`;
          });
        } else if (message.type == 'coming') {
          if (this.comingShow) {
            clearTimeout(this.watchTimer);
            this.comingShow = false;
          }
          this.comingName = form.name;
          this.openComing();
        }
      },
      openComing() {
        this.comingShow = true;
        this.watchTimer = setTimeout(() => {
          this.comingShow = false;
        }, 1000);
      },
      iscolor(id) {
        return [
          'text-blue',
          'text-white',
          'text-orange',
          'text-yellow',
          'text-brown',
          'text-olive',
          'text-green',
          'text-red',
          'text-pink',
          'text-purple',
        ][parseInt(id % 10)];
      },
      handleFocus() {
        this.isfocur = true;
        //console.log("go handleFocus");
      },
      handleBlur() {
        this.isfocur = false;
        //console.log("go handleBlur");
      },
      dateFormat(fmt) {
        let date = new Date();

        var o = {
          'M+': date.getMonth() + 1, //月份
          'd+': date.getDate(), //日
          'h+': date.getHours(), //小时
          'm+': date.getMinutes(), //分
          's+': date.getSeconds(), //秒
          'q+': Math.floor((date.getMonth() + 3) / 3), //季度
          S: date.getMilliseconds(), //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        for (var k in o)
          if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
        return fmt;
      },
      async handlePopup(type, method) {
        console.log('handlePopup', type, method);
        this.$refs[type][method]();
      },
      openPop() {
        let that = this;
        that.money = '';
        that.isShowPopup = true;
        this.$refs.gift.close();
      },
      openGiftPop() {
        let that = this;
        this.blur();
        // that.isShowGiftPopup = true;
        this.$refs.gift.open();
        that.isShowPopup = false;
        that.loadGift();
      },
      async daShangMake() {
        let that = this;
        if (Number(that.money) <= 0) {
          uni.showToast({
            title: '请输入打赏金额',
            icon: 'none',
          });
          return false;
        }
        let res = await sheep.$api.video.dshbmoney({
          money: that.money,
          id: that.liveData.user.id,
        });
        if (res.data.code === 1) {
          let txt = '打赏了' + that.money + '元';
          that.sendWs(txt);
          that.pushChat(txt);
          that.isShowPopup = false;
        }
        // uni.request({
        // 	url: '/user/dshbmoney',
        // 	data:{
        // 		money: that.money,
        // 		id: that.liveData.user.id,
        // 	},
        // 	success: res => {
        // 		if(res.data.code===1){
        // 			let txt = '打赏了'+that.money+'元';
        // 			that.sendWs(txt);
        // 			that.pushChat(txt);
        // 			that.isShowPopup = false;
        // 		}
        // 	}
        // });
      },
      async loadGift() {
        let that = this;
        let res = await sheep.$api.video.gift();
        if (res.code === 1) {
          that.giftList = res.data;
        }
        // uni.request({
        // 	url: '/live/gift',
        // 	data:{},
        // 	success: res => {
        // 		res = res.res
        // 		if(res.code===1){
        // 			that.giftList = res.data;
        // 		}
        // 	}
        // });
      },
      sendGift(item) {
        let that = this;

        uni.showModal({
          title: '赠送礼物',
          content: '确认赠送该礼物？',
          success: async function (res) {
            if (res.confirm) {
              that.$refs.gift.close();
              let res = await sheep.$api.video.reward({
                id: item.id,
                live_id: that.liveData.id,
              });
              if (res.code === 1) {
                that.$emit('showGift', res.data.svg);

                // that.sendWs(res.data, 'gift');
                that.pushChat('您赠送了【' + res.data.name + '】', 'gift');
              }
              // uni.request({
              // 	url: '/live/reward',
              // 	data: {
              // 		id: item.id,
              // 		live_id: that.liveData.id,
              // 	},
              // 	success: res => {
              // 		res = res.res
              // 		if (res.code === 1) {
              // 			that.isShowGiftPopup = false;
              // 			that.$emit('showGift', res.data.svg);

              // 			that.sendWs(res.data, 'gift');
              // 			that.pushChat('您赠送了【' + res.data.name + '】', 'gift');
              // 		} else {
              // 			uni.showToast({
              // 				title: res.msg,
              // 				icon: 'none'
              // 			});
              // 		}
              // 	}
              // });
            } else if (res.cancel) {
            }
          },
        });
      },
      changeGift(index) {
        if (this.gift_index === index) {
          this.gift_index = '';
        } else {
          this.gift_index = index;
        }
      },
      openRedpacket() {
        uni.navigateTo({
          url: '/pages/video/live/redpacket',
        });
        this.blur();
      },
    },
  };
</script>

<style lang="scss">
  .wanl-live-message {
    position: relative;
    .mask {
      flex: 1;
      position: absolute;
    }
  }

  /* 群组消息 */
  .wanl-live-comment {
    /* #ifndef APP */
    /*-webkit-mask: -webkit-gradient(linear,left 30%,left top,from(#000),to(transparent));*/
    /* #endif */

    margin-left: 25rpx;
    margin-right: 25rpx;
    justify-content: space-between;
    flex-direction: row;
    position: relative;
  }

  .wanl-live-comment-item {
    overflow: hidden;
    color: #ffffff;
    flex: 1;
  }

  .wanl-live-comment-item-scroll {
    /* #ifdef H5 || MP */
    max-height: 500rpx;
    min-height: 400rpx;
    /* #endif */

    /* #ifdef APP */
    height: 500rpx;
    /* #endif */
  }

  /* #ifdef H5 || MP */
  .wanl-live-comment-item-scroll-h5 {
    margin-top: 6rpx;
    overflow: hidden;
    display: flex;
  }

  .wanl-live-comment-item-scroll-mp {
    margin-bottom: 6rpx;
    overflow: hidden;
    display: block;
  }

  .wanl-live-comment-item-tag {
    background-color: rgba(0, 0, 0, 0.2);
    padding-top: 8rpx;
    padding-right: 16rpx;
    padding-bottom: 8rpx;
    padding-left: 16rpx;
    border-radius: 10rpx;
    overflow: hidden;
    display: inline-block;
  }

  /* #endif */
  .wanl-live-comment-item-scroll-app {
    flex-direction: row;
    margin-top: 6rpx;
  }

  .wanl-live-comment-item-scroll-app-item {
    background-color: rgba(0, 0, 0, 0.2);
    padding-top: 8rpx;
    padding-right: 16rpx;
    padding-bottom: 8rpx;
    padding-left: 16rpx;
    border-radius: 10rpx;
    flex-direction: row;
  }

  /* 点赞特效	 */
  .wanl-live-like {
    position: relative;
    /* #ifndef APP */
    flex: 0 0 120rpx;
    /* #endif */
    width: 120rpx;
    height: 500rpx;
  }

  /* #ifndef APP */
  .bubble {
    position: absolute;
    width: 90rpx;
    height: 90rpx;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: 100%;
    transform-origin: bottom;
  }

  .b1 {
    background-image: url(/static/images/live/1.png);
  }

  .b2 {
    background-image: url(/static/images/live/2.png);
  }

  .b3 {
    background-image: url(/static/images/live/3.png);
  }

  .b4 {
    background-image: url(/static/images/live/4.png);
  }

  .b5 {
    background-image: url(/static/images/live/5.png);
  }

  .b6 {
    background-image: url(/static/images/live/6.png);
  }

  .bl1 {
    animation:
      bubble_1 3s linear 1 forwards,
      bubble_big_1 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl2 {
    animation:
      bubble_2 3s linear 1 forwards,
      bubble_big_2 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl3 {
    animation:
      bubble_3 3s linear 1 forwards,
      bubble_big_1 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl4 {
    animation:
      bubble_4 3s linear 1 forwards,
      bubble_big_2 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl5 {
    animation:
      bubble_5 3s linear 1 forwards,
      bubble_big_1 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl6 {
    animation:
      bubble_6 3s linear 1 forwards,
      bubble_big_3 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl7 {
    animation:
      bubble_7 3s linear 1 forwards,
      bubble_big_1 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl8 {
    animation:
      bubble_8 3s linear 1 forwards,
      bubble_big_3 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl9 {
    animation:
      bubble_9 3s linear 1 forwards,
      bubble_big_2 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl10 {
    animation:
      bubble_10 3s linear 1 forwards,
      bubble_big_1 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  .bl11 {
    animation:
      bubble_11 3s linear 1 forwards,
      bubble_big_2 0.8s linear 1 forwards,
      bubble_y 3s linear 1 forwards;
  }

  @keyframes bubble_11 {
    0% {
    }

    25% {
      margin-left: -20rpx;
    }

    50% {
      margin-left: -20rpx;
    }

    100% {
      margin-left: -36rpx;
    }
  }

  @keyframes bubble_10 {
    0% {
    }

    25% {
      margin-left: -40rpx;
    }

    50% {
      margin-left: -40rpx;
    }

    100% {
      margin-left: -40rpx;
    }
  }

  @keyframes bubble_9 {
    0% {
    }

    25% {
      margin-left: 20rpx;
    }

    50% {
      margin-left: 20rpx;
    }

    100% {
      margin-left: 20rpx;
    }
  }

  @keyframes bubble_8 {
    0% {
    }

    25% {
      margin-left: 40rpx;
    }

    50% {
      margin-left: 40rpx;
    }

    100% {
      margin-left: 40rpx;
    }
  }

  @keyframes bubble_7 {
    0% {
    }

    25% {
      margin-left: 6rpx;
    }

    50% {
      margin-left: 2rpx;
    }

    75% {
      margin-left: 4rpx;
    }

    100% {
      margin-left: 6rpx;
    }
  }

  @keyframes bubble_6 {
    0% {
    }

    25% {
      margin-left: -6rpx;
    }

    50% {
      margin-left: -2rpx;
    }

    75% {
      margin-left: -4rpx;
    }

    100% {
      margin-left: -6rpx;
    }
  }

  @keyframes bubble_5 {
    0% {
    }

    25% {
      margin-left: 10rpx;
    }

    50% {
      margin-left: -10rpx;
    }

    75% {
      margin-left: -20rpx;
    }

    100% {
      margin-left: -40rpx;
    }
  }

  @keyframes bubble_4 {
    0% {
    }

    25% {
      margin-left: -10rpx;
    }

    50% {
      margin-left: -10rpx;
    }

    75% {
      margin-left: 40rpx;
    }

    100% {
      margin-left: 20rpx;
    }
  }

  @keyframes bubble_3 {
    0% {
    }

    25% {
      margin-left: -40rpx;
    }

    50% {
      margin-left: 20rpx;
    }

    75% {
      margin-left: 40rpx;
    }

    100% {
      margin-left: -20rpx;
    }
  }

  @keyframes bubble_2 {
    0% {
    }

    25% {
      margin-left: 40rpx;
    }

    50% {
      margin-left: 50rpx;
    }

    75% {
      margin-left: 20rpx;
    }

    100% {
      margin-left: 10rpx;
    }
  }

  @keyframes bubble_1 {
    0% {
    }

    25% {
      margin-left: -16rpx;
    }

    50% {
      margin-left: 16rpx;
    }

    75% {
      margin-left: -30rpx;
    }

    100% {
      margin-left: 30rpx;
    }
  }

  @keyframes bubble_big_1 {
    0% {
      transform: scale(0.3);
    }

    100% {
      transform: scale(1.2);
    }
  }

  @keyframes bubble_big_2 {
    0% {
      transform: scale(0.3);
    }

    100% {
      transform: scale(0.9);
    }
  }

  @keyframes bubble_big_3 {
    0% {
      transform: scale(0.3);
    }

    100% {
      transform: scale(0.6);
    }
  }

  @keyframes bubble_y {
    0% {
      margin-bottom: 0;
    }

    10% {
      margin-bottom: 0;
    }

    75% {
      opacity: 1;
    }

    100% {
      margin-bottom: 400rpx;
      opacity: 0;
    }
  }

  /* #endif */

  /* 欢迎信息 */
  .wanl-live-coming {
    margin-left: 25rpx;
    background-color: rgba(255, 86, 136, 0.7);
    padding-top: 8rpx;
    padding-right: 16rpx;
    padding-bottom: 8rpx;
    padding-left: 16rpx;
    border-radius: 10rpx;
  }

  .wanl-live-coming-text {
    color: #ffffff;
    font-size: 28rpx;
  }

  .app-text {
    font-size: 29rpx;
  }

  .app-context {
    font-size: 29rpx;
    color: #ffffff;
  }

  .mph5-text {
    font-size: 26rpx;
  }

  .mph5-context {
    font-size: 26rpx;
    color: #ffffff;
  }

  .text-white {
    color: #ffffff !important;
  }

  .text-orange {
    color: #fe6600 !important;
  }

  .text-yellow {
    color: #ffff00 !important;
  }

  .text-green {
    color: #39b54a !important;
  }

  .text-olive {
    color: #8dc63f !important;
  }

  .text-purple {
    color: #6739b6 !important;
  }

  .text-pink {
    color: #f840b1 !important;
  }

  .text-blue {
    color: #0081ff !important;
  }

  .text-brown {
    color: #a5673f !important;
  }

  .text-red {
    color: #ff243a !important;
  }

  .comment-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20rpx;

    justify-content: space-between;
  }

  .comment-input {
    background-color: rgba(255, 255, 255, 0.2);
    margin-right: 20rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    flex: 1;
    color: #fff;
    padding: 0rpx 30rpx;
    height: 70rpx;
    width: 440rpx;
  }

  .send-btn {
    font-size: 28rpx;
    height: 60rpx;

    line-height: 60rpx;
    color: white;
  }

  .placeholderClass {
    font-size: 28rpx;
    color: #999999;
    padding: 0rpx 30rpx;
  }

  .change-image {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;
  }

  /* 弹框 */
  .live-popup {
    position: relative;
    background: #fff;
    padding-left: 18rpx;
    padding-right: 18rpx;
    border-top-left-radius: 18rpx;
    border-top-right-radius: 18rpx;
  }

  .live-popup-title {
    height: 100rpx;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .live-popup-title-text {
    font-size: 32rpx;
  }

  .live-popup-title-close-text {
    width: 40rpx;
    height: 40rpx;
  }

  .live-popup-list {
    margin-bottom: 216rpx;
  }

  .live-popup-list2 {
    margin-bottom: 20rpx;
  }

  .live-popup-start {
    position: absolute;
    right: 18rpx;
    left: 18rpx;
  }

  .live-control-right-start {
    display: flex;
    background: #f40;
    align-items: center;
    justify-content: center;
    height: 76rpx;
    border-radius: 40rpx;
  }

  .live-control-right-start-text {
    color: #fff;
    font-size: 30rpx;
    height: 76rpx;
    line-height: 76rpx;
  }

  .category-title {
    font-size: 28rpx;
  }

  .input-placeholder {
    font-size: 28rpx;
  }

  .gift-btn,
  .shang-btn {
    width: 80rpx;
    height: 80rpx;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10rpx;
  }

  .gift-image {
    width: 40rpx;
    height: 40rpx;
  }

  .shang-image {
    width: 44rpx;
    height: 44rpx;
  }

  .comment-input-box,
  .comment-icon-box {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .gift-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    color: #ffffff !important;
    overflow: hidden !important;
  }

  .gift-item {
    width: 158rpx;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 40rpx;
    padding: 20rpx 0rpx 0rpx 0rpx;
    color: #ffffff !important;
    overflow: hidden !important;

    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  .gift-item-active {
    width: 158rpx;
    margin-right: 14rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 40rpx;
    border: 2rpx solid #696b78;
    background-color: #282b34;
    padding: 20rpx 0rpx 0rpx 0rpx;
    border-radius: 16rpx;
    overflow: hidden !important;
    color: #ffffff !important;
  }

  .gift-pic {
    width: 100rpx;
    height: 100rpx;
  }

  .gift-title {
    font-size: 26rpx;
    margin-top: 10rpx;
    color: #ffffff !important;
  }

  .gift-price {
    font-size: 20rpx;
    margin-top: 4rpx;
    color: #ffffff !important;
  }

  /* .gift-item:nth-child(4n){
	margin-right: 0rpx;
} */

  .gift-small-btn {
    background-color: #ff004e;
    color: #ffffff !important;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160rpx;
    height: 50rpx;
    border-radius: 0rpx 0rpx 16rpx 16rpx;
    overflow: hidden;
    border-bottom-left-radius: 16rpx !important;
    border-bottom-right-radius: 16rpx !important;
    text-align: center;
    line-height: 50rpx;
    /* #ifndef APP-NVUE */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    /* #endif */
  }

  .gift-item-bottom {
    border-radius: 0rpx 0rpx 16rpx 16rpx !important;
  }

  .live-popup-gift {
    background: #151724 !important;
  }
</style>
